<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>4-Promise的then方法参数中的函数的返回值</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style></style>
  </head>
  <body>
    <div id="app"></div>
    <script>
      function getData(url) {
        return new Promise(function (resolve, reject) {
          var xhr = new XMLHttpRequest();
          xhr.onreadystatechange = function () {
            if (xhr.readyState != 4) return;
            if (xhr.readyState == 4 && xhr.status == 200) {
              resolve(xhr.responseText);
            } else {
              reject('服务器错误啦！');
            }
          };
          xhr.open('get', url);
          xhr.send(null);
        });
      }
      // 通过打印.then能看得出，每次then返回的都是前面的那个.then输出的结果
      getData('http://www.localhost:3000/data')
        .then(function (data) {
          return getData('http://www.localhost:3000/data1');
        })
        .then(function (data) {
          return new Promise(function (resolve, reject) {
            setTimeout(function () {
              resolve(123);
            }, 1000);
          });
        })
        .then(function (data) {
          console.log(data);
          return 'hello promise'; // 123
        })
        .then(function (data) {
          console.log(data); // hello promise
        });
    </script>
  </body>
</html>
